<template>
  
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onBeforeUnmount, ref } from "vue";

const chartRef = ref(null);
let chartInstance = null;

const initChart = (rawData) => {
  chartInstance = echarts.init(chartRef.value);
  const totalData = [];
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0;
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i];
    }
    totalData.push(sum);
  }
  const series =  ["电网下网电量", "光伏发电量", "储能放电量"].map(
    (name, sid) => {
      return {
        name,
        type: "bar",
        stack: "total",
        barWidth: "60%",
        label: {
          show: true,
        },
        data: rawData[sid].map((d, did) => d),
      };
    }
  );
  chartInstance.setOption({
    legend: {
      selectedMode: false,
      textStyle: {
        color: "#C1EAF8",
      },
    },
    grid: {
      left: 50,
      right: 10,
      top: 50,
      bottom: 30,
    },
    yAxis: {
      type: "value",
      name: "kwh",
      nameTextStyle:{
        color: "#C1EAF8",
      },
      axisLabel: {
        textStyle: {
          color: "#C1EAF8", //这里用参数代替了
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.27)",
          type: "dashed",
        },
      },
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLabel: {
        textStyle: {
          color: "#C1EAF8", //这里用参数代替了
        },
      },
    },
    series,
  });
};

onMounted(() => {
  let rawData = [
    [100, 302, 301, 334, 390, 330, 320],
    [820, 832, 901, 934, 1290, 1330, 1320],
    [150, 212, 201, 154, 190, 330, 410],
  ];
  initChart(rawData);
  setInterval(() => {
    rawData = [[
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random()* 1000),
      Math.round(Math.random()* 1000),
    ],[
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random()* 1000),
      Math.round(Math.random()* 1000),
    ],[
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random() * 1000),
      Math.round(Math.random()* 1000),
      Math.round(Math.random()* 1000),
    ]]
    initChart(rawData);
  },10000)
  window.addEventListener("resize", () => {
    chartInstance && chartInstance.resize();
  });
});

onBeforeUnmount(() => {
  chartInstance && chartInstance.dispose();
});
</script>
